<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>anguler例子</title>
	<script src="lib/angular.min.js"></script>
	<script src="controllers.js"></script>
	<style type="text/css">
		.hehe {
			width: 200px;
			height: 200px;
			background-color: burlywood;
		}
		
		.hehe2 {
			position: fixed;
			height: 30px;
		}
		  .my-input {
    -webkit-transition:all linear 0.5s;
    transition:all linear 0.5s;
    background: transparent;
  }
  .my-input.ng-invalid {
    color:white;
    background: red;
  }
	</style>
</head>

<body ng-model="inputExample">
	Update input to see transitions when valid/invalid.
	Integer is a valid value.
	<form name="testForm" ng-controller="ExampleController">
	  <input ng-model="val" ng-pattern="/^\d+$/" name="anim" class="my-input" />
	</form>
	
	<div ng-controller="ExampleController">
	  <form name="userForm">
		Name:
		<input type="text" name="userName"
			   ng-model="user.name"
			   ng-model-options="{ getterSetter: true }" />
	  </form>
	  <pre>user.name = <span ng-bind="user.name()"></span></pre>
	</div>


	<haha></haha>
	<input type="button" value="set color" ng-click="myStyle={color:'red'}">
	<input type="button" value="set background" ng-click="myStyle={'background-color':'blue'}">
	<input type="button" value="clear" ng-click="myStyle={}">
	<input type="button" value="改变大小" ng-click="myStyle={}">
	<br/>
	<pre>myStyle={{myStyle}}</pre>
	<br/>
	<div ng-style="myStyle" class="hehe">
		demo
	</div>

	<br/> Click me:
	<input type="checkbox" ng-model="checked">
	<br/>
	<div>
		Show:
		<div class="check-element animate-hide" ng-show="checked">
			<span class="glyphicon glyphicon-thumbs-up"></span> 显示
		</div>
	</div>
	<div>
		Hide:
		<div class="check-element animate-hide" ng-hide="checked">
			<span class="glyphicon glyphicon-thumbs-down"></span> 隐藏
		</div>
	</div>

	切换：
	<button ng-model="checked">哈哈</button>
	<br/>
	<!----------------->
	<div ng-controller="ShowController">
		<button ng-click="togglePanel()">显示与隐藏</button>
	    <div class="hehe" ng-show='panel.show'>
	    	显示模块
	    </div>
	</div>
	

<div ng-controller="ExampleController">
<form novalidate class="simple-form">
Name: <input type="text" ng-model="user.name" /><br />
E-mail: <input type="email" ng-model="user.email" /><br />
Gender: <input type="radio" ng-model="user.gender" value="male" />male
<input type="radio" ng-model="user.gender" value="female" />female<br />
<button ng-click="reset()">RESET</button>
<button ng-click="update(user)">SAVE</button>
</form>
<pre>form = {{user | json}}</pre>
<pre>master = {{master | json}}</pre>
</div>

<script>
 angular.module('copyExample', [])
   .controller('ExampleController', ['$scope', function($scope) {
     $scope.master= {};

     $scope.update = function(user) {
       // Example with 1 argument
       $scope.master= angular.copy(user);
     };

     $scope.reset = function() {
       // Example with 2 arguments
       angular.copy($scope.master, $scope.user);
     };

     $scope.reset();
   }]);
</script>


</body>

</html>